<template>
  <div>
    <table-page v-if="showType === 1" ref="tablePageRef" @changeShowType="changeShowType" />
    <detail-page v-if="showType === 2" ref="detailPageRef" @changeShowType="changeShowType" />
    <save-page v-if="showType === 3" ref="addPageRef" @changeShowType="changeShowType" />
  </div>
</template>
<script>
import TablePage from './components/TablePage.vue'
import DetailPage from './components/DetailPage.vue'
import SavePage from './components/SavePage.vue'

export default {
  name: 'Index',
  components: { DetailPage, TablePage, SavePage },
  data () {
    return {
      showType: 1,
      rowData: {}
    }
  },
  methods: {
    changeShowType (type, row) {
      this.showType = type
      if (type === 1) {
        console.log(type)
      } else if (type === 2) {
        this.$nextTick(() => {
          this.$refs.detailPageRef.init(row)
        })
      } else if (type === 3) {
        this.$nextTick(() => {
          this.$refs.addPageRef.init(row)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
